import Vue from 'vue'
import VueRouter from 'vue-router'
// 加载组件
import Layout from '../components/Layout.vue'
import Index from '../views/Index.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
    {
        name: 'login',
        path: '/login',
        component: Login
    },
    // 嵌套路由
    {
        path: '/',
        component: Layout,
        children: [
            {
                name: 'index',
                path: '',
                component: Index
            },
            {
                name: 'detail',
                path: 'detail/:id',
                // 开启 props，会把 URL 中的参数传递给组件
                // 在组件中通过 props 来接收 URL 参数
                props: true,
                component: () => import('../views/Detail.vue')
            }
        ]
    }
    
]

const router = new VueRouter({
    routes
})
export default router
